<template>
  <div class="types-page">
    <div class="types">
      <div class="type-item" v-for="(item, index) in typeList" :key="index">
        <div class="title">{{ item.activityTypeName }}</div>
        <div class="desc">{{ item.activityIllustrate }}</div>
        <div class="button">
          <el-button
            class="button"
            type="primary"
            size="small"
            @click="createActive(item)"
            >新建</el-button
          >
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button
        class="button"
        type="primary"
        size="small"
        @click="$router.back()"
        >返回</el-button
      >
    </div>
  </div>
</template>

<script>
import { _types } from "./promotionMethodComps/definition";
export default {
  components: {},
  data() {
    return {
      typeList: _types,
    };
  },
  mounted() {
    this.getTypeList();
  },
  methods: {
    getTypeList() {
      this.$http({
        url: this.$http.adornUrl("/platform/activityMarketType/list"),
        method: "get",
      }).then(({ data }) => {
        if (data) {
          this.typeList = data;
        }
      });
    },
    createActive(item) {
      this.$router.push({
        path: "/platform-specialOffer/create-activity",
        query: {
          acTypeInfo: JSON.stringify(item),
          action: "add",
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.types {
  display: flex;
  flex-wrap: wrap;

  .type-item {
    width: 200px;
    background: #f0f7ff;
    margin: 12px;
    box-sizing: border-box;
    padding: 20px 28px 22px 28px;
    border-radius: 4px;

    .title {
      text-align: center;
      font-weight: 600;
      font-size: 17px;
      color: #666666;
    }

    .desc {
      margin-top: 12px;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
    }

    .button {
      width: max-content;
      margin: 0 auto;
      margin-top: 8px;
    }
  }
}

.footer {
  margin-top: 30px;
  display: flex;
  flex-direction: row-reverse;
}
</style>
